<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>受灾区域</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link th:href="@{../assets/css/page.css}" rel="stylesheet" />
<link th:href="@{../assets/css/NGR.css}" rel="stylesheet" />
<!--[if lt IE 9]>
	<script th:src="@{../assets/js/html5shiv.js}"></script>
	<script th:src="@{../assets/js/respond.min.js}"></script>
<![endif]-->
<!-- <style>
.inside-header {
	    background:url(../assets/img/home/home.png);
	    width:100%;
	    height: 100%;
	    background-repeat : no-repeat;
	    background-color: #DAE8F5;
	}


</style>
 -->
  <style type='text/css'>
    ul { list-style: none; }
    #recordingslist audio { display: block; margin-bottom: 10px; }
      .unclicked {  
        width: 200px;  
        padding:8px;  
        background-color: #428bca;  
        border-color: #357ebd;  
        color: #fff;  
        -moz-border-radius: 1px;  
        -webkit-border-radius: 1px;  
        border-radius: 10px; /* future proofing */  
        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
        text-align: center;  
        vertical-align: middle;  
        border: 1px solid transparent;  
        font-weight: 900;  
        font-size:125%  
      } 
  </style>
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main">

<div class="widget-body no-padding">
	<div style="text-align: center;">
 <h1>应急救援系统广播录制与播放</h1>

  
  <button class="unclicked" onclick="startRecording(this)">开始录音</button>
  <button class="unclicked" onclick="stopRecording(this)" disabled="disabled">停止</button>
  
  <h2>录制内容</h2>
  <ul id="recordingslist"></ul>
  
  <h2>日志记录</h2>
  <pre id="log"></pre>


</div></div>
</div>
<script type="text/javascript" th:src="@{../assets/js/recorder.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/jquery/dist/jquery.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap/dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/layer/src/layer.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/page.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/NGR.min.js}"></script>

<script th:inline="javascript">
 function __log(e, data) {
 //<![CDATA[
    log.innerHTML += "\n" + e + " " + (data || '');
    //]]> 
  }

  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('创建媒体流...');

    // Uncomment if you want the audio to feedback directly
    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');
    
    recorder = new Recorder(input);
    __log('记录仪初始化...');
  }

  function startRecording(button) {
  //<![CDATA[
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('录制中...');
     		//]]> 
  }

  function stopRecording(button) {
  //<![CDATA[
    recorder && recorder.stop();
     //]]> 
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('录制结束...');
    
    // create WAV download link using audio data blob
    createDownloadLink();
    
    recorder.clear();
   
  }

  function createDownloadLink() {
  //<![CDATA[
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().valueOf() + '.mp3';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });
    //]]>
  }

  window.onload = function init() {
  //<![CDATA[
    try {
     
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      
      audio_context = new AudioContext;
      __log('音频上下文设置 ...');
      __log('音频录制' + (navigator.getUserMedia ? '可用...' : 'not present!'));
    } catch (e) {
      alert('No web audio support in this browser!');
    }
    
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No live audio input: ' + e);
    });
    //]]>
  };
</script>
</body></html>

